<template>
  <div>
    <h2>品牌管理</h2>
    <hr>
    <!--下面是添加的模块-->
    <el-button type="primary" @click="dialogFormVisible = true">新建</el-button>
    <el-button type="success" @click="flush">刷新</el-button>
    <el-dialog title="添加品牌" :visible.sync="dialogFormVisible">
      <el-form :model="brand">
        <el-form-item label="品牌名称" :label-width="formLabelWidth">
          <el-input v-model="brand.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母" :label-width="formLabelWidth">
          <el-input v-model="brand.firstChar" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBrand">确 定</el-button>
      </div>
    </el-dialog>
    <!--这是修改模块-->
    <el-dialog title="修改品牌" :visible.sync="dialogFormVisible1">
      <el-form :model="brand">
        <el-form-item label="品牌名称" :label-width="formLabelWidth">
          <el-input v-model="brand.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母" :label-width="formLabelWidth">
          <el-input v-model="brand.firstChar" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="updateBrand">确 定</el-button>
      </div>
    </el-dialog>
    <!--下面是品牌列表-->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="品牌ID"
        width="120">
      </el-table-column>
      <el-table-column
        prop="name"
        label="品牌名称"
        width="120">
      </el-table-column>
      <el-table-column
        prop="firstChar"
        label="品牌首字母"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        prop=""
        label="操作"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <span>
            <el-button type="warning" @click="findByBrand(scope.row.id)">修改</el-button>
            <el-button type="danger" @click="deleteBrand(scope.row.id)" round>删除</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size.sync="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages">
      </el-pagination>
  </div>
</template>

<script>
  import * as axios from 'axios'
  export default {
    name: 'BrandList',
    data() {
      return {
        tableData: [{}],
        page:1,
        size:10,
        pages:0,
        multipleSelection: [],
        dialogFormVisible1:false,
        dialogFormVisible: false,
        /*添加的品牌对象*/
        brand: {
          name: '',
          firstChar:'',
        },
        formLabelWidth: '120px'
      }
    },
    methods:{
      //多选框
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      /*分页的方法*/
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.findAll();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.findAll();
      },
      /*查询品牌列表*/
      findAll(){
        axios.get("http://localhost:8080/brand/findPage/"+this.page+"/"+this.size).then(res=>{
          this.tableData = res.data.data.rows;
          this.pages = res.data.data.total;
        })
      },
      //添加品牌方法
      addBrand:function () {
        axios.post("http://localhost:8080/brand/add",this.brand).then(res=>{
          alert("添加成功");
          this.dialogFormVisible = false;
        })
      },
      //删除品牌方法
      deleteBrand:function (id) {
        if (confirm("确定删除吗")){
          axios.post("http://localhost:8080/brand/deleteBrand/"+id).then(res=>{
            alert("删除成功!")
            location.reload();
          })
        } else {
          alert("你删不掉我!")
        }
      },
      //根据id查询品牌
      findByBrand:function (id) {
        axios.get("http://localhost:8080/brand/findById/"+id).then((res)=>{
          this.brand = res.data.data;
        })
        this.dialogFormVisible1 = true
      },
      //修改方法
      updateBrand:function(){
        axios.post("http://localhost:8080/brand/save",this.brand).then((res)=>{
          alert("修改成功");
          this.dialogFormVisible1 = false;
          location.reload();
        })
      },
      flush:function () {
        location.reload();
      }
    },
    mounted(){
      this.findAll();
    }
  }
</script>

<style scoped>

</style>
